<template>
	<view class="layout">
		<view class="personalCourse">
			浏览记录
		</view>
		<!-- <scroll-view scroll-y="true" style="height: 70vh;overflow-x: hidden;"> -->

		<course @click="toCourse(course.courseId,course.courseName)" v-for="course in courseList" :key="course.courseId" :courseInfo="course" v-if="hasCourse"></course>
		<!-- </scroll-view> -->
		<l-empty image="order" description="无浏览记录" v-else />
		<view class="safe-area-inset-bottom">

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import apis from '/api/apis.js'
	const courseList = ref([])
	const hasCourse = ref(true)
	apis.getHistoryCourse().then(res => {
		// console.log(res)
		if (res.data.length === 0) {
			hasCourse.value = false
		} else {
			hasCourse.value = true
			for (let i = 0; i < res.data.length; i++) {
				courseList.value.push({
					courseId: res.data[i].courseId,
					courseName: res.data[i].videoName,
					picture: res.data[i].videoCover
				})
			}
		}
	})
	const toCourse = (id,name)=>{
		uni.navigateTo({
			url: "/pages/video/video?id=" + id +"&name=" + name
		})
	}
</script>

<style lang="scss" scoped>
	.layout {
		padding: 10rpx;

		.personalCourse {
			// margin-top: 35rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 35rpx;
			font-weight: 600;


		}
	}
</style>